import React, { useState } from 'react'
import CalendarView from './components/CalendarView'
import ChartSection from './components/ChartSection'
import WeightHeader from './components/WeightHeader'
import WeightInputDialog from './components/WeightInputDialog'
import { useWeightData } from './components/useWeightData'
import './index.module.scss'

export default function WeightPage() {
  const { weights, addWeight, getTodayWeight } = useWeightData()
  const [openDialog, setOpenDialog] = useState(false)
  const [showChart, setShowChart] = useState(false)

  const todayWeight = getTodayWeight()

  const handleSubmit = (w) => {
    addWeight(w)
  }

  return (
    <div className="weight-page">
      <div className="header">
        <div className="nav-title">体重记录</div>
      </div>

      <div style={{padding:16}}>
        <WeightHeader todayWeight={todayWeight} onShowChart={()=>setShowChart(v=>!v)} showChart={showChart} onOpenDialog={()=>setOpenDialog(true)} />
        <div style={{marginTop:12}}>
          <CalendarView weights={weights} />
        </div>

        {showChart && (
          <div style={{marginTop:12}}>
            <ChartSection weights={weights} />
          </div>
        )}
      </div>

      <WeightInputDialog open={openDialog} onOpenChange={setOpenDialog} onSubmit={handleSubmit} />
    </div>
  )
}
